<template>
	<div class="Main-body">
		<div class="Main-box">
			<div class="MainLeft">
				<div v-if="ArticleData.length" class="text-box">
					<div class="listbox" v-for="(item, idex) in ArticleData" :key="idex" @click="goToArticle(item)">
						<div :class="['bgimg', { 'left-img': idex % 2 === 0 }, { 'right-img': idex % 2!== 0 }]" :style="{ 
			             'order': idex % 2 === 0? 1 : 2,
			             'backgroundImage': `url('${item.url}')` 
			           }">
						</div>
						<div :class="['textbox', { 'right-text': idex % 2 === 0 }, { 'left-text': idex % 2!== 0 }]"
							:style="{ 'order': idex % 2 === 0? 2 : 1 }">
							<div class="content">
								<p class="time">{{formatTime(item.time)}}</p>
								<h3>{{ item.title }}</h3>
								<h5>作者：{{ item.author }}&nbsp;&nbsp;标签：{{item.tab}}</h5>
								<div class="text-ellipsis">
									<p v-html="item.content.replace(/<[^>]*>/g, '')"></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="MainRight">
				<My />
				<Time />
				<Website />
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import axios from 'axios';
	import My from '../util/main/My.vue';
	import Time from '../util/main/Time.vue';
	import Website from '../util/main/Website.vue';
	import emitter from '../../../utils/evenBus';
	import {
		useRouter
	} from 'vue-router';

	const router = useRouter();

	const ArticleData = ref([]);
	const showIndexes = ref([]);

	function getArticle() {
		const res = axios.post("/api/article/selecteq", {
			user: {
				title: "",
				tab_id: "",
				time: ""
			}
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				// 请求成功，处理响应数据

				// 这里可以根据具体业务需求判断 response.data 的内容
				// 假设返回的数据中有一个 success 字段表示是否成功
				// console.log(response.data);
				if (response.data.code == 200) {

					// console.log(response.data.msg);
					if (response.data.data.length <= 5) {
						ArticleData.value = response.data.data;
					} else {
						const randomIndexes = [];
						const dataLength = response.data.data.length;
						while (randomIndexes.length < 5) {
							const index = Math.floor(Math.random() * dataLength);
							if (!randomIndexes.includes(index)) {
								randomIndexes.push(index);
							}
						}
						ArticleData.value = randomIndexes.map(index => response.data.data[index]);
					}

					const maxTimeArticle = response.data.data.reduce((max, current) => {
						return current.time > max.time ? current : max;
					});
					emitter.emit('ArticleUpdate', formatTime(maxTimeArticle.time));
					emitter.emit('ArticleLength', response.data.data.length);
					// router.replace('/');
				} else {
					console.log(' 获取文章失败:', response.data.msg);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	function goToArticle(item) {
		sessionStorage.setItem("article",JSON.stringify(item));
		router.push('/disarticle');
	}
	const formatTime = (timestamp) => {
		const date = new Date(timestamp);
		return date.toLocaleDateString();
	};

	onMounted(() => {
		getArticle();
	});
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color: #000;
	}

	.Main-body {
		width: 100%;
		// background-color: var(--primary-color);
		display: flex;
		justify-content: center;
		align-content: center;
		margin-top: 30px;

		.Main-box {
			width: 80%;
			// height: 500px;
			// background-color: aqua;
			display: flex;

			.MainLeft {
				width: 70%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -50px;

				.text-box {
					width: 80%;
					max-width: 650px;
					min-width: 500px;
					margin-top: 50px;
					// background-color: #aaffff;

					.left-img {
						width: 60%;
						height: 300px;
						border-top-left-radius: 10px;
						border-bottom-left-radius: 10px;
						/* background-image: url('../../static/img/img1.jpg'); 移除硬编码的图片地址 */
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
					}

					.right-img {
						width: 60%;
						height: 300px;
						border-top-right-radius: 10px;
						border-bottom-right-radius: 10px;
						/* background-image: url('../../static/img/img2.jpg'); 移除硬编码的图片地址 */
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
					}

					.listbox {
						cursor: pointer;
						margin: auto;
						margin-top: 30px;
						width: 100%;
						min-width: 600px;
						height: 300px;
						border: 1px solid #ccc;
						border-radius: 10px;
						/* background-color: aqua; */
						display: flex;



						.right-text {
							width: 40%;
							height: 300px;
							background-color: rgba(255, 255, 255, 0.5);
							backdrop-filter: blur(5px);
							border-top-right-radius: 10px;
							border-bottom-right-radius: 10px;
							box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

						}

						.left-text {
							width: 40%;
							height: 300px;
							background-color: rgba(255, 255, 255, 0.5);
							backdrop-filter: blur(5px);
							border-top-left-radius: 10px;
							border-bottom-left-radius: 10px;
							box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
						}

						.content {

							color: #333;
							text-align: center;

							.time {
								width: 100px;
								height: 20px;
								background-color: #6661ff;
								color: #fff;
								border-radius: 10px;
							}

							.text-ellipsis {
								width: 220px;
								height: 140px;
								margin: auto;
								margin-top: 10px;
								/* background-color: #fac9b8; */
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 7;
								overflow: hidden;
							}

							h3 {
								font-size: 28px;
								font-weight: 700;
								margin-top: 20px;
								padding: 0;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}

							h5 {
								font-size: 18px;
								font-weight: 400;
								margin-top: 5px;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}

							p {}
						}
					}
				}
			}

			.MainRight {
				width: 30%;
				height: 100%;
				// background-color: aliceblue;
			}
		}
	}
</style>